<template>
  <div id="container">
    <!-- 单行省略（默认） -->
    <ReText class="single-line">
      这是一段非常非常长的单行文本内容，超出部分会自动显示省略号
    </ReText>

    <!-- 多行省略（限制2行） -->
    <ReText :lineClamp="2" class="multi-line">
      这是多行文本示例，第一行<br />
      这是第二行内容<br />
      这是会被省略的第三行内容
    </ReText>

    <!-- 自定义Tooltip内容 -->
    <ReText class="custom-tooltip">
      <template #content>
        <div style="color: red; font-weight: bold">自定义Tooltip样式的内容</div>
      </template>
      悬停查看自定义样式的Tooltip
    </ReText>

    <!-- 自定义Tippy配置 -->
    <ReText :tippyProps="{
      placement: 'bottom',
      theme: 'light',
      arrow: false,
      followCursor: 'horizontal',
    }" class="custom-tooltip">
      自定义Tooltip配置的文本
    </ReText>

    <div style="width: 1500px; text-align: center; margin: 20px 0">
      <el-button @click="router.back()">返回</el-button>
    </div>
  </div>
</template>

<script setup>
// import ReText from "../components/ReText/index.vue";

import { useRouter } from "vue-router";
const router = useRouter();
</script>

<style scoped>
#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.single-line {
  width: 150px;
  /* display: inline-block; */
}

.multi-line {
  width: 200px;
  /* display: inline-block; */
}

.custom-tooltip {
  width: 100px;
}
</style>
